<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <title>注册页面</title>
    <script type="text/javascript" src="/homework/js/jquery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#confirmPassword").change(function () {
                var password = $("#registerPassword").val();
                if ($(this).val() == password) {
                    $("#message").empty();
                } else {
                    $("#message").html("两次密码不一致");
                }
            });
// 检查账号是否已存在
            $("#account").change(function () {
                var str = $(this).val();
                var params = {"user": str};
                $.ajax({
                    url: "/homework/check.User",
                    type: "post",
                    data: params,
                    dataType: "json",
                    success: function (data) {
                        if (data.pass === 0) {
                            // 账号已存在
                            $("#message2").empty().css("color", "red").html("账号已存在");
                            $("#regist").attr("disabled", true);
                        } else {
                            // 账号可用
                            $("#message2").empty().css("color", "green").html("账号可用");
                            // 检查密码是否一致，如果一致则启用注册按钮
                            var password = $("#registerPassword").val();
                            var confirmPassword = $("#confirmPassword").val();
                            if (password === confirmPassword) {
                                $("#regist").attr("disabled", false);
                            }
                        }
                    },
                    error: function () {
                        alert("请求出错，请稍后重试");
                    }
                });
            });
            window.onload = function () {
                var urlparams = new URLSearchParams(window.location.search);
                var isNull = urlparams.get("isNull");
                if(isNull==0){
                    alert("账号已存在");
                }
            }
        });
    </script>
</head>
<body class="bg-gray-100 flex justify-center items-center min-h-screen">
<div class="bg-white p-8 rounded shadow-md w-full max-w-md">
    <h2 class="text-2xl font-bold mb-4 text-center">注册</h2>
    <form action="/homework/regist.User" method="post">
        <div class="mb-4">
            <label for="registerUsername" class="block text-gray-700 font-bold mb-2">用户名</label>
            <input type="text" id="registerUsername" name="username" class="w-full border border-gray-300 p-2 rounded" placeholder="请输入用户名">
        </div>
        <div class="mb-4">
            <label for="account" class="block text-gray-700 font-bold mb-2">账号</label>
            <input type="text" id="account" name="account" class="w-full border border-gray-300 p-2 rounded" placeholder="请输入用户名">
            <span id="message2"></span>
        </div>
        <div class="mb-4">
            <label for="registerPassword" class="block text-gray-700 font-bold mb-2">密码</label>
            <input type="text" name="password" id="registerPassword" class="w-full border border-gray-300 p-2 rounded" placeholder="请输入密码">
        </div>
        <div class="mb-4">
            <label for="confirmPassword" class="block text-gray-700 font-bold mb-2">确认密码</label>
            <input type="text" id="confirmPassword" class="w-full border border-gray-300 p-2 rounded" placeholder="请再次输入密码"><span id="message" style="color: red"></span>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 font-bold mb-2">用户类型</label>
            <select name="user_attribute" class="w-full border border-gray-300 p-2 rounded">
                <option value="3">用户</option>
                <option value="2">商家</option>
            </select>
        </div>
        <button type="submit" id="regist" class="w-full bg-green-500 text-white p-2 rounded hover:bg-green-600 transition-colors">注册</button>
    </form>
</div>
</body>
</html>